
import React from 'react';
// import { useRouter } from 'next/router';
import Image from 'next/image';
import fetch from 'node-fetch'

export default function Classify(props: any) {
  console.log(props)
  return (
    <div className='classify-container'>
      <span className='w-full'>classify type: </span>
      <span>{props.id}</span>
      <Image
        src="https://fanyi-cdn.cdn.bcebos.com/static/translation/widget/translate/output/img/short-banner1_edeef70.png"
        alt="Picture of the author"
        width={250}
        height={100}
      />
    </div>
  )
}

// 服务端执行 (可使用node模块)
export const getServerSideProps = async (context: any) => {
  console.log(process.cwd())
  const { query: { id } } = context;
  let res = await fetch(`https://m.maizuo.com/gateway?filmId=${id}`);
  let data = await res.json();
  // 返回一个包含props为key值的对象
  return {
    props: {
      title: '非静态化',
      data,
      id
    }
  }
}

// 这三者仅限于取数据, 而页面交互的获取数据还是通过基于XMLHttpRequest的ajax
// 跨域问题: 通过自己的api接口转发(因为服务器之间是不存在跨域的)
